<template>
    <div v-if="visible" class="dialog">
        <div class="dialog-box">
            <h3 class="font-bold text-lg">{{ title }}</h3>
            <p class="py-4">
                <el-carousel height="400px">
                    <el-carousel-item v-for="(item,index) in list" :key="index">
                        <img :src="item.img" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </p>
            <div class="modal-action">
                <label for="my-modal" class="btn" @click="close">关闭</label>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-facing-decorator';

@Component({
    components: {},
})
export default class enlargeImage extends Vue {
    @Prop({ default: false }) public visible!: boolean;
    @Prop() public list?: any[];
    @Prop() public title!: string;

    @Emit('closeImage')
    public close() {
        return false;
    }
}
</script>

<style scoped lang="less">
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    .dialog-box {
        width: 800px;
        background-color: #fff;
        border-radius: 2vh;
        padding: 10vh;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    }
}
</style>
